<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    dialogWidth="300px"
  >
    <template #searchPanel>
      <search-panel
        v-slot="{ form }"
        :selectPer="'newCarOrder:page'"
        :excelPer="'newCarOrder:export'"
        @search="search"
        :showSearchButton="true"
        :showExportButton="true"
        @export="excelInfo"
      >
        <el-input
          v-model="form.client"
          clearable
          placeholder="客户名称/手机号"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <CarModel
          style='width: 400px'
          v-model='modelList'
          ref='carModel'
          placeholder='车型组件'
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="车架号"
          style="width: 150px"
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="订单编号"
          style="width: 150px"
        />
        <job-shop style="width: 150px;" v-model="form.storeId" placeholder="销售门店" />
        <el-select
          clearable
          style="width: 150px"
          v-model="form.saleId"
          placeholder="销售顾问"
        >
          <el-option
            v-for="item in dataArry"
            :key="item.index"
            :value="item.id"
            :label="item.userName"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="form.carBrandId"
          placeholder="销售渠道"
        >
          <el-option
            v-for="item in getDict['品牌']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="form.carBrandId"
          placeholder="销售类型"
        >
          <el-option
            v-for="item in getDict['品牌']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="form.carBrandId"
          placeholder="订单状态"
        >
          <el-option
            v-for="item in getDict(['订单状态'])['订单状态']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-date-picker
          v-model="form.paymentTime"
          type="datetimerange"
          start-placeholder="创建开始时间"
          end-placeholder="创建结束时间"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        />
        <el-date-picker
          v-model="form.paymentTime"
          type="datetimerange"
          start-placeholder="订单开始时间"
          end-placeholder="订单结束时间"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        />

      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit cursor"
            title="修改"
            @click="updateUser(row)"
          ></i>
          <i title="红冲订单" 
            v-if="!row.redWashStatus"
            v-permission="'newCarOrder:red'" 
            class="el-icon-s-order cursor" 
            @click="redOrder(row, '申请红冲订单')"
          ></i>
          <i title="红冲审核" 
            v-if="row.redWashStatus == '待审核'"
            v-permission="'newCarOrder:redAudit'" 
            class="el-icon-s-order cursor" 
            @click="redOrder(row, '审核红冲订单')"
          ></i>
          <i title="详情" 
            v-permission="'newCarOrder:detail'" 
            @click="viewDetail(row)" 
            class="el-icon-view cursor"
          ></i>
          <i title="销售清单详情" 
            v-permission="'newCarOrder:inventory'" 
            @click="viewSalesDetail(row)" 
            class="el-icon-document cursor"
          ></i>
          <i title="配车" 
            v-permission="'newCarOrder:supply'" 
            v-if="!row.vin" 
            @click="withCar(row)" 
            class="el-icon-key cursor"
          ></i>
          <i title="完结" 
            v-permission="'newCarOrder:finish'" 
            class="el-icon-finished cursor" 
            @click="modifyOrderStatus(row.id, '完结', 5)"
          ></i>
          <i title="作废" 
            v-permission="'newCarOrder:cancellation'" 
            v-if="row.status == 2" 
            @click="modifyOrderStatus(row.id, '作废', 6)"
            class="el-icon-delete-solid cursor"
          ></i>
        </template>
      </data-table>
    </template>

    <template #dialog>
      <dialog-red-form 
        v-if="dialogTitle == '审核红冲订单' || dialogTitle == '申请红冲订单'"
        :carOrderId="selectedItemId" 
        :redOrderType="redOrderType" 
        @operate="handleDataOperate"
        @close="dialogCloseEv"
      />
      <dialog-car-form 
        v-if="dialogTitle == '配车'"
       :dialogData="selectRowInfo" 
       @close="dialogCloseEv" 
      />

    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  getList,
  updateStatus
} from '@/api/pre-sale/orderManagement/newCar'
import { getDict, exportExcel } from '@/utils/index'
import { CarModel } from '@/components/index'
import { getStoreUser } from '@/api/after-sale/personnel/index'
import DialogCarForm from './components/DialogCarForm'
import DialogRedForm from './components/DialogRedForm'
export default {
  components: {
    CarModel,
    DialogCarForm,
    DialogRedForm
  },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: getList,
      dataName: ['content', 'totalRecords']
    })
  ],
  data() {
    return {
      modelList: [],
      dataArry: [],
      getDict: getDict,
      form: {
        storeId: '',
        client: '' // 客户信息
      },
      selectedItemId: null,
      redOrderType: null, 
      tableColumnAttributes: [
        { name: '订单号', value: 'orderNo', type: 'text' },
        { name: '订单类型', value: 'orderTypeName', type: 'text' },
        { name: '销售门店', value: 'saleStore', type: 'text' },
        { name: '开票门店', value: 'invoiceStore', type: 'text' },
        { name: '客户姓名', value: 'clientName', type: 'text' },
        { name: '联系方式', value: 'clientPhone', type: 'text', width: '120' },
        { name: '品牌/车系/车型', value: 'carModelName', type: 'text', width: '260' },
        { name: '车架号', value: 'vin', type: 'text' },
        { name: '销售顾问', value: 'saleName', type: 'text' },
        { name: '销售类型', value: 'saleType', type: 'text' },
        { name: '销售渠道', value: 'saleChannel', type: 'text' },
        { name: '订单日期', value: 'orderCreatedAt', type: 'text', width: '120' },
        { name: '金融订单', value: 'financialReply', type: 'render',  render: (row, value) => {
            if (value == 0) {
              return '待批复';
            } else if (value == 1) {
              return '已批复';
            }
          },
        },
        { name: '市场指导价', value: 'guidancePrice', type: 'text' },
        { name: '车辆成交价', value: 'salePrice', type: 'text' },
        { name: '国产/进口', value: 'importedOrDomestic', type: 'text' },
        { name: '订单金额', value: 'orderPrice', type: 'text' },
        { name: '购车类型', value: 'paymentPattern', type: 'text' },
        { name: '是否前装车', value: 'buildin', type: 'render' },
        { name: '前装车金额', value: 'buildinPrice', type: 'text' },
        { name: '购置税', value: 'purchaseTax', type: 'text' },
        { name: '车船税', value: 'boatsTax', type: 'text' },
        { name: '上户费用', value: 'dbshfy', type: 'text' },
        { name: '保险费', value: 'insuranceMoney', type: 'text' },
        { name: '精品金额', value: 'specialAmount', type: 'text' },
        { name: '定金', value: 'depositAmount', type: 'text' },
        { name: '定金实收金额', value: 'depositRealAmount', type: 'text' },
        { name: '首付款', value: 'downPaymentAmount', type: 'text' },
        { name: '尾款（贷款)', value: 'tailAmount', type: 'text' },
        { name: '贷款状态', value: 'isLoan', type: 'render' },
        { name: '是否开票', value: 'isInvoice', type: 'render' },
        { name: '是否锁车', value: 'isLockCar', type: 'render' },
        { name: '预计交车日期', value: 'estimateGiveCarDate', type: 'text', width: '120' },
        { name: '订单状态', value: 'status', type: 'render', render: (row, value) => {
            if (value == 0) {
              return '下订单'
            } else if (value == 1) {
              return '未付首付';
            } else if (value == 2) {
              return '未付尾款';
            } else if (value == 3) {
              return '待提车';
            } else if (value == 4) {
              return '已提车';
            } else if (value == 5) {
              return '已完结';
            } else if (value == 6) {
              return '已作废';
            }
          }, 
        },
        { name: '车辆状态', value: 'carStatus', type: 'text' },
        { name: '红冲状态', value: 'redWashStatus', type: 'text' },
        { name: '退货状态', value: 'returnState', type: 'text' },
        { name: '销售出库日期', value: 'saleOutflowDate', type: 'text', width: '120' },
        { name: '备注', value: 'remark', type: 'text' }
      ],
      dict: {},
      selectRowInfo: {}, //配车信息
    }
  },
  methods: {
    dialogCloseEv() {
      this.dialogClose();
      this.setTableData();
    },
    //配车
    withCar(row) {
      this.selectRowInfo = {
        id: row.id,
        carModelId: row.carModelId,
        carModelName: row.carModelName
      }
      this.handleDataInsert('配车');
    },
    // 编辑员工信息
    updateUser(row) {
      const { id } = row
      this.$router.push({
        path: '/personnel/updataEmployee',
        query: {
          userId: id
        }
      })
    },
    //查看详情
    viewDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/orderManagement/carDeatail',
        query: {
          id: id
        }
      })
    },
    //查看销售单详情
    viewSalesDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/orderManagement/salesList',
        query: {
          id: id
        }
      })
    },
    // 查询
    search(form) {
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    add() {
      this.$router.push({
        name: 'adddepositOrder',
        params: { type: 'add' }
      })
    },
    //作废and完结订单
    modifyOrderStatus(id, type, status) {
      this.$confirm(`是否确认${type}此订单`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        updateStatus(id, status).then(response => {
          if (response.success){
            this.$message.success('操作成功');
            this.setTableData()
          }
        })
      })
    },
    //导出
    excelInfo() {
      exportExcel('XcOrder', '新车订单', { ...this.form }, this.pageSize, this.currentPage)
    },
    //红冲订单
    redOrder(row, type) {
      this.selectedItemId = row.id;
      this.redOrderType = type;
      this.handleDataInsert(type);
    }
  },
  async mounted() {
    await getStoreUser().then((res) => {
      const { success, data } = res
      if (success) this.dataArry = data
    })
  }
}
</script>
<style scoped>
  .cursor {
    margin-left: 15px;
    cursor: pointer
  }
</style>
